<template>
  <view class="content">
    <view class="home-pic">
      <u-image width="100%" height="400rpx" :src="src"></u-image>
    </view>
<u-grid :col="2">
<u-grid-item v-for="(item, index) in functionbuttondata" :key="item.id" @click="click(item.name)"
 bg-color='#214423'>
<u-icon :name="item.value" color="yellow" :size="46"></u-icon>
<view class="grid-text">{{item.name}}</view>
</u-grid-item>
    </u-grid>
    <!-- <button @click="a">同步</button> -->
    <view class="libery" v-if="libraryRoom">您现在所处库室为：{{libraryRoom}}--{{networkstate}}</view>
    <u-toast ref="uToast"></u-toast>
 <u-popup v-model="Dialog" font-size="8" mode="center">
   <view class="contentBox">
          <view class="library-room" v-for="(item, index) of libraryRoomList" :key="item.id">
            <text
              @click="choose(item)"
              >{{ item.libraryroomname }}
            </text>
          </view>
      </view>
    </u-popup>
  <u-popup v-model="reasonForWhyDialog" font-size="8" mode="center">
    <view class="contentBox">
           <view class="library-room" v-for="(item, index) of reasonForwhyList" :key="item.id">
             <text
               @click="reasonForwhyChoose(item)"
               >{{ item.name }}
             </text>
           </view>
       </view>
     </u-popup>
   
   <u-popup v-model="equpmentNameDialog" font-size="8" mode="center">
     <view
       style="
         color: white;
         background-color: #09690f;
         width: 100%;
         height: 767rpx;
         padding: 15rpx 20rpx 0rpx 20rpx;
         position: relative;
       "
     >
     
    <view class="search">
    <u-search
       placeholder="请输入搜索关键词"
       v-model="typeKeyword"
       @search="searchEquipment(typeKeyword)"
       @change="changeEquipment(typeKeyword)"
     ></u-search>
     </view>
     
     <view class="contentText">
       <view v-for="(item, index) of paginationEquipmentList" :key="index" style="width: 100%;background-color: #09690f;"">
         <text
           style="margin: 20rpx 10px; font-size: 40rpx;"
           @click="chooseEqupmentName(item)"
           >{{ item.name }}
         </text>
       </view>
       </view>
       
     </view>
     <page-pagination :total="equpmentlist.length" :pageSize="10"  @change="change"></page-pagination>
   </u-popup>
   
  </view>
</template>

<script>
import sqlLite from '../../common/sqllite-utils';
import { onClickSynchronousButton } from './index.js'
export default {
  data() {
    return {
      src: '../../static/2.webp',
      Dialog:false,
      reasonForWhyDialog:false,
      libraryRoom: uni.getStorageSync("shiyouname"),
      timer:null,
      typeKeyword:'',
      //点击盘点前首先选择装备名称
      equpmentNameDialog:false,
      equpmentlist:[],
      transitnumber:'',
      functionbuttondata: [],
      paginationEquipmentList:[]
    };
  },
  onShow() {
    /**
     * 四秒钟发送一次网络请求，当请求没响应就会被拦截器拦截
     */
   this.timer =  setInterval(() => {
      this.$u.api.serverConfigurationQuery().then(res => {
        if(res.code === 0) {
          this.$u.vuex('networkstate','在线')
        }
      }).catch(err => {
        console.log(err)
        this.$u.vuex('networkstate','离线')
      })
    },4000)
    this.functionbuttondata = uni.getStorageSync("menulist")
  },
  onHide() {
    console.log('zhixing')
  if(this.timer) {
  　　　　	clearInterval(this.timer); //关闭
  　　	} 
  },
  methods: {
    click(val) {
      if (val === '初始入库') {
        this.$u.route('/pages/incoming-information/incoming-information');
      }else if(val === '同步') {
        onClickSynchronousButton.call(this)
      }else if(val === '库室') {
        this.Dialog = true
      }else if(val === '出入库') {
        this.transitnumber =val
        if (!uni.getStorageSync("shiyouid")) {
          this.$refs.uToast.show({
            title: '请先选择相应的库室！',
            type: 'warning',
          });
          return false;
        }
        this.reasonForWhyDialog = true
      }else if(val === '维修') {
        this.$u.route('/pages/repair/repair');
      }else if(val === '查询') {
        this.$u.route('/pages/queryEquipmentInformation/queryEquipmentInformation');
      }else if(val === '保养') {
        this.$u.route('/pages/maintenance/maintenance');
      }else if(val === '盘点') {
        const tableName = 'equipmentNameTables';
        sqlLite.selectFromTable(
                 	`select * from ${tableName}`,
        ).then(res => {
          console.log(res,'成功获取装备名称表')
          const data = {
            id: 0,
            name: "全部",
          };
          res.push(data)
          console.log(res)
          this.equpmentlist = res
          this.paginationEquipmentList = sqlLite.pagination(10,1,this.equpmentlist)
          if (uni.getStorageSync("shiyouid")) {
            this.equpmentNameDialog = true;
            
          } else {
            this.Dialog = true;
          }
        })
       
        
      }else if(val === '群扫出入库') {
        this.transitnumber = val
        if (!uni.getStorageSync("shiyouid")) {
          this.$refs.uToast.show({
            title: '请先选择相应的库室！',
            type: 'warning',
          });
          return false;
        }
        this.reasonForWhyDialog = true
      }
    },
    choose(e) {
      if (e.id != 0 && e.libraryroomname != "") {
        this.libraryRoom = e.libraryroomname
        uni.setStorage({
          key: "shiyouid",
          data: e.id,
        });
        uni.setStorage({
          key: "shiyouname",
          data: e.libraryroomname,
        });
        this.$u.vuex('shiyouid',e.id)
        this.Dialog = false;
      }
    },
    reasonForwhyChoose(e) {
      
      if (e.id != 0 && e.name != "") {
        uni.setStorage({
          key: "reasonforwhyid",
          data: e.id,
        });
        uni.setStorage({
          key: "reasonforwhyname",
          data: e.name,
        });
        if(this.transitnumber === '出入库') {
          this.$u.route('/pages/outPutInStorageManagement/outPutInStorageManagement');
        }else if(this.transitnumber === '群扫出入库'){
          this.$u.route('/pages/sweepIn-outWarehouse/sweepIn-outWarehouse');
        }
        this.reasonForWhyDialog = false
      }
      
    },
    /**
     * 用户确认搜索时触发
     */
    searchEquipment(value) {
      
    },
    /**
     * 用户改变输入框内容时触发
     */
    changeEquipment(value) {
      if(value !='') {
        this.paginationEquipmentList =  this.equpmentlist.filter(item => item.name.indexOf(value)!=-1)
      }else {
        this.paginationEquipmentList = sqlLite.pagination(10,1,this.equpmentlist)
      }
    },
    /**
     * 选择具体装备名称时触发
     */
    chooseEqupmentName(e) {
      console.log(e)
      uni.setStorage({
        key: "leixingId",
        data: e.id,
      });
      this.equpmentNameDialog = false
      this.$u.route('/pages/inventory/inventory')
      
    },
    a() {
      onClickSynchronousButton.call(this)
    },
    change(e) {
    this.paginationEquipmentList =  sqlLite.pagination(10,e,this.equpmentlist)
    console.log(this.paginationEquipmentList)
    
    }
  },
};
</script>

<style>
.home-pic {
  margin-top: 50rpx;
  color: yellow;
}
.grid-text {
  font-size: 20rpx;
  color: yellow;
}
.libery {
  font-size: 15px;
  color: #ffff00;
  margin-top: 330rpx;
}
.contentBox {
  color: #ffffff;
  width: 600rpx;
  height: 100%;
  background-color: #09690f;
  
}
.library-room {
  display: inline-block;
  margin: 10rpx;
}
.search {
  
}
.contentText {
  margin-top: 30rpx;
}
</style>
